<template>
  <div class="cms-views-container mine-cms-pages">
    <div class="mine-header-contain">
      <header class="h-[109px] flex items-center justify-between pl-4 pt-4">
        <span class="flex">
          <img
            src="https://img2.baidu.com/it/u=939903330,3137313886&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=384"
            class="w-[55px] h-[55px]"
            style="border-radius: 50%"
            alt=""
          />
          <span class="pl-5">
            <h3 class="text-base text-black">
              大大马里奥
              <span>
                <img :src="mineIcons.member_logo" alt="" class="w-4 h-4 ml-2 relative bottom-0.5" />
              </span>
              <span>
                <span>
                  <img :src="mineIcons.right_arrow" alt="" class="w-[18px] h-[18px] ml-2 relative bottom-0.5" />
                </span>
              </span>
            </h3>
            <span class="inline-block pr-2 pl-1 bg-[#fde4cc] rounded-xl text-[#de7506] text-[10px]"
              ><span>
                <img :src="mineIcons.icon" alt="" class="w-5 h-5" />
              </span>
              金币余额：100</span
            >
          </span>
        </span>
        <span class="w-16 h-[33px] bg-[#fafafa] pl-[10px] text-xs text-[##262626] flex items-center recharge-btn">
          <span>
            <img :src="mineIcons.recharge" alt="" class="w-4 h-4 mr-1 relative bottom-0.5" />
          </span>
          充值
        </span>
      </header>
      <CmsVipMember :type="1" member />
    </div>
    <div class="relative mine-main-contain bottom-4 bg-[#f8f8f8] px-4 pt-4">
      <div class="flex items-center justify-between w-full px-5 bg-white rounded-lg h-28">
        <span v-for="item in kingList" :key="item.title" class="flex flex-col items-center">
          <span>
            <img :src="item.icon" alt="" class="w-[38px] h-[38px] mb-2" />
          </span>
          <label class="text-xs text-[#262626]">{{ item.title }}</label>
        </span>
      </div>
      <div
        class="h-[54px] mt-4 bg-white rounded-lg flex items-center justify-between px-4"
        v-for="item in mineDataList"
        :key="item.title"
      >
        <span>
          <span class="mr-4">
            <img :src="item.icon" alt="" class="w-6 h-6" />
          </span>
          <span class="text-sm text-[#262626]">{{ item.title }}</span>
        </span>
        <span>
          <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
        </span>
      </div>
    </div>
    <CmsBottomBar active="mine" />
  </div>
</template>

<script setup lang="ts">
import CmsComponents from '@cms/components'
import mineIcons from '../assets/mine'
const { CmsVipMember, CmsBottomBar } = CmsComponents

const kingList = [
  {
    icon: mineIcons.my_purchases,
    title: '我的购买'
  },
  {
    icon: mineIcons.my_collect,
    title: '我的收藏'
  },
  {
    icon: mineIcons.watch_history,
    title: '观看历史'
  },
  {
    icon: mineIcons.consumer_detail,
    title: '消费明细'
  }
]

const mineDataList = [
  {
    icon: mineIcons.invite_friends,
    title: '邀请好友'
  },
  //   {
  //     icon: '',
  //     title: '联系客服'
  //   },
  {
    icon: mineIcons.setting,
    title: '系统设置'
  }
]
</script>

<style scoped lang="less">
.mine-cms-pages {
  .mine-header-contain {
    background: linear-gradient(215deg, rgba(251, 245, 240, 0.87) 4%, rgba(255, 255, 255, 0) 86%);
    .recharge-btn {
      border-top-left-radius: 100px;
      border-bottom-left-radius: 100px;
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow: 0px 1px 4px 0px rgba(107, 107, 107, 0.1);
    }
  }
  .mine-main-contain {
    box-shadow: 0px -2px 16px 0px rgba(101, 42px, 10, 0.08);
    border-radius: 13px 13px 0px 0px;
    border-top: 1px solid rgba(101, 42, 10, 0.08);
  }
}
</style>
